<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <cpn :cmessage="message" :cmovies="movies"></cpn>
      <!-- 必须使用v-bind，否则会当成字符串 -->
      <!-- <cpn message='message' cmovies='movies'></cpn> -->
    </div>

    <template id="cpn">
      <div>
        <h2>{{cmessage}}</h2>
        <ul>
          <li v-for="item in cmovies">{{item}}</li>
        </ul>
      </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
      /*
      父传子步骤：
        - 实例绑定：在子组件实例中将父组件的变量通过v-bind绑定给子组件props里的变量
        - 声明：在子组件构造器中使用props声明该组件中将要被使用的变量
        - 模板使用：在子组件模板中使用子组件props里的变量
    */

      /* 
			父传子：props
    	props的值有两种方式：
    		- 字符串数组：数组中的字符串就是接收传递的数据
    		- 对象：对象可以设置传递的类型，也可以设置默认值等 
		*/

      const cpn = {
        template: '#cpn',
        // props: ['cmessage', 'cmovies'],
        props: {
          // 1.类型限制
          // cmessage: String,
          // cmovies: Array,

          // 2.设置默认值，以及必传值
          cmessage: {
            type: String,
            default: 'aaa', // 默认值
            required: true // 必须传值，否则会报错
          },
          // 类型是对象或数组时，默认值必须是一个函数
          cmovies: {
            type: Array,
            default() {
              return []
            }
          }
        },
        data() {
          return {}
        }
      }

      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          movies: ['一人之下', '凡人修仙传', '狐妖小红娘', '妖怪名单']
        },
        components: {
          cpn
        }
      })
    </script>
  </body>
</html>
